<template>
  <div class="flex flex-col w-full h-full">
    <div class="detailLogo flex flex-col justify-center">
      <img src="@/assets/imgs/detailLogo.png" alt="" class="w-250px h40px ml-50px" />
    </div>
    <div class="books-detail" :class="buttonState ? '' : 'full-screen'">
      <el-card>
        <el-button v-if="buttonState" @click="retreat" type="primary" style="float: right">返回</el-button>
        <div class="introduce card flex">
          <div class="logo flex">
            <img :src="cover" alt="" />
            <!-- <el-button round size="small" type="primary" plain>
          <el-icon>
            <Edit />
          </el-icon>
          我要评分
        </el-button> -->
          </div>
          <div class="content">
            <div class="title mb-10px">{{ dataDetail.title }}</div>
            <div class="w-400px flex justify-between">
              <div class="author flex-1">
                作者：<span>{{ dataDetail.author }}</span>
              </div>
              <div class="author flex-1">
                出版社：<span>{{ dataDetail.publishername }}</span>
              </div>
            </div>
            <div class="w-400px flex justify-between">
              <div class="author flex-1">
                ISBN：<span>{{ dataDetail.isbn }}</span>
              </div>
              <div class="author flex-1">
                出版年月：<span>{{ dataDetail.pubdate ? dataDetail.pubdate.substring(0, 7) : '' }}</span>
              </div>
            </div>
            <div class="w-400px flex justify-between">
              <div class="author flex-1">
                版本：<span>{{ dataDetail.verionnum }}</span>
              </div>
              <div class="author flex-1">
                字数：<span>36000000字</span>
              </div>
            </div>
            <div class="other font-size-14px">
              简介：
              <span class="top-right-content" :class="!buttonShow.briefIntroduction ? 'top-right-content-show' : ''"
                v-html="dataDetail.brief"></span>
              <el-button @click="handleShow('briefIntroduction')" type="primary" size="small" text bg>
                {{ buttonShow.briefIntroduction ? '收起' : '展开'
                }}<el-icon class="el-icon--right">
                  <ArrowDown v-show="!buttonShow.briefIntroduction" />
                  <ArrowUp v-show="buttonShow.briefIntroduction" />
                </el-icon>
              </el-button>
            </div>
            <div class="other">
              <div class="keywords flex" style="margin-left: 0">关键词：
                <div class="keywordsList flex">
                  <span v-for="item in dataDetail.keyword ? dataDetail.keyword.split('，') : []" :key="item"
                    class="mr-10px">{{ item }}</span>
                </div>
              </div>
              <div class="keywords flex" style="margin-left: 0">知识体系：
                <div class="keywordsList flex">
                  <span>{{ dataDetail.label }}</span>
                </div>
              </div>
            </div>
            <div class="top-right-btn">
              <el-button type="primary">阅读全文</el-button>
              <el-button type="success">下载申请</el-button>
              <el-button color="#039595">元数据详情</el-button>
            </div>
          </div>
        </div>
      </el-card>
      <div class="book-tab">
        <el-card>
          <title-container title="目录"></title-container>
          <div class="directory">
            <span v-html="dataDetail.dir" :class="!buttonShow.directory ? 'directory-show' : ''"></span>
            <el-button @click="handleShow('directory')" type="primary" size="small" text bg>
              {{ buttonShow.directory ? '收起' : '展开'
              }}<el-icon class="el-icon--right">
                <ArrowDown v-show="!buttonShow.directory" />
                <ArrowUp v-show="buttonShow.directory" />
              </el-icon>
            </el-button>
          </div>
        </el-card>
      </div>
      <div class="book-tab">
        <el-card>
          <title-container title="图书信息"></title-container>
          <div>
            <div class="mt-20px mb-20px">
              <span class="fw-700">推荐文案：</span>
              <span class="c-#9999">一部用红宝石砌成的红色史诗，穿越历史的长河，照亮新时代的征程。</span>
            </div>
            <div class="mt-20px mb-20px">
              <div class="fw-700 mb-10px">评语：</div>
              <div v-for="(item, index) in 3" :key="index" class="mb-10px p-10px b-r-10px bg-#F5F5F5 font-size-14px">
                一部《星火燎原》展现了半部中国革命史，《星火燎原》是由“革命先烈和人民群众鲜血染成的革命之书”
              </div>
            </div>
            <div class="mt-20px mb-20px min-h-190px  bg-#F0F7FF flex">
              <div class="p-10px flex-1">
                <span class="fw-700">知识图谱</span>
                <div class="w-100% h-90%">
                  <KnowledgeGraph :showAll="KnowledgeGraphShowAll" />
                </div>
              </div>
              <div class="seeMore w-60px p-10px bg-#3A8FEA" @click="KnowledgeGraphShowAll = !KnowledgeGraphShowAll">
                {{ KnowledgeGraphShowAll ? '收 起 < <' : '查 看 更 多 > >' }} </div>
              </div>
            </div>
        </el-card>
      </div>
      <div class="book-tab">
        <el-card>
          <title-container title="相关图书"></title-container>
          <div class="bookRecommendations">
            <div class="b-books-box flex">
              <div class="b-books" v-for="(item, index) in bookRecommendations" :key="index">
                <img :src="item.imgPath" alt="" />
                <p>{{ item.text }}</p>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script setup>
import TitleContainer from '@/views/book/titleContainer.vue'
import KnowledgeGraph from '@/components/KnowledgeGraph/index.vue'
import { ref } from 'vue'
import { formatDate } from '@/utils/formatTime'
import image1 from '@/views/book/image/kgj.png'
import image2 from '@/views/book/image/szh.png'
import image3 from '@/views/book/image/zrjs.png'
import image4 from '@/views/book/image/kgj.png'
import { useRoute } from 'vue-router'
import * as metaApi from '@/api/meta'
import bookLogo from '@/assets/imgs/bookLogo.webp'
const cover = ref('')
const route = useRoute()
const id = route.query.detailsId
const metaId = route.query.metaId
const dataDetail = ref({})
const buttonState = ref()
const KnowledgeGraphShowAll = ref(false)
const getInfo = async () => {
  dataDetail.value = await metaApi.selectMetaDataOne(metaId, id)
  cover.value =
    Array.isArray(dataDetail.value.cover) && dataDetail.value.cover.length > 0
      ? dataDetail.value.cover[0]?.url || ''
      : bookLogo
  const regex = /，/g
  dataDetail.value.keyword = dataDetail.value.keyword.replace(regex, ' ')
}
onMounted(() => {
  buttonState.value = JSON.parse(route.query.buttonState)
  getInfo()
})
const buttonShow = reactive({})
const handleShow = (buttonType) => {
  console.log(buttonType)
  Object.assign(buttonShow, {
    [buttonType]: !buttonShow[buttonType]
  })
  console.log(buttonShow)
}
const bookRecommendations = ref([
  {
    imgPath: image1,
    text: '新时代强军文学作品选（2012-2022）·报告文学卷'
  },
  {
    imgPath: image2,
    text: '实战化的战略思维'
  },
  {
    imgPath: image3,
    text: '中日军事防务关系史'
  },
  {
    imgPath: image4,
    text: '站起来了——中华人民共和国开国纪事'
  }
])
import router from '@/router'
const retreat = () => {
  router.go(-1)
}
</script>
<style scoped lang="scss">
.books-detail {
  flex: 1;
  overflow: auto;
  padding: 20px 80px;
  box-sizing: border-box;
}

.full-screen {
  height: calc(100vh - 20px - 20px);
  overflow: auto; // 显示滚动条，根据内容决定是否显示
  /* 隐藏默认的滚动条样式 */
  scrollbar-width: none; // Firefox
  -ms-overflow-style: none; // IE and Edge */
}

li {
  // list-style: none;
}

.flex {
  display: flex;
}

// :deep(.el-button) {
//   padding: 8px;
//   font-size: 11px;
//   box-sizing: border-box;
// }

:deep(.el-icon) {
  margin-right: 2px;
  margin-bottom: 2px;
}

.el-icon--right {
  margin-left: 5px;
}

.introduce {
  padding: 15px 10px 15px 30px;
  box-sizing: border-box;

  .logo {
    // width: 150px;
    // height: 220px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-right: 50px;

    img {
      width: 190px;
      // height: 240px;
      padding: 10px;
      border: 1px dashed #cccccc;
    }
  }

  .content {
    flex: 1;
    line-height: 25px;

    .title {
      height: 30px;
      font-size: 18px;
      line-height: 30px;
    }

    .other {
      margin-top: 10px;

      .keywords {
        flex: 1;
        margin-left: 20px;
        font-size: 14px;

        .keywordsList {
          align-items: center;
          font-size: 14px;

          span {
            color: #3a8fea;
          }
        }
      }
    }
  }
}

.bookDetails {
  height: 50px;

  ul {
    height: 100%;
    padding: 10px 10px 10px 30px;
    box-sizing: border-box;
    align-items: center;

    li {
      margin-right: 60px;
    }
  }
}

.directory {
  ul {
    flex-direction: column;
    line-height: 25px;
  }
}


.bookRecommendations {
  padding: 10px;
  box-sizing: border-box;

  .b-books-box {
    justify-content: space-around;

    .b-books {
      display: flex;
      width: 190px;
      flex-direction: column;
      align-items: center;

      img {
        width: 190px;
        height: 240px;
        margin-bottom: 10px;
      }

      p {
        font-size: 12px;
      }
    }
  }
}

.book-tab {
  margin-top: 20px;

  ::v-deep(.el-card__body) {
    padding-top: 0;
    // padding-left: 0;
  }
}

.author {
  font-size: 14px;
}

.recommendedCopy {
  font-size: 14px;
}

.top-right-content {
  font-family: Microsoft YaHei;
  font-size: 14px;
  font-weight: normal;
  line-height: 32px;
  letter-spacing: 0px;
  color: #999999;
}

.top-right-content-show {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.directory-show {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
}

.top-right-btn {
  margin: 10px 0;
}

.detailLogo {
  width: 100%;
  height: 200px;
  background: url('@/assets/imgs/detailbg.png') no-repeat;
  background-size: 100% 100%;
}

.seeMore {
  text-align: center;
  line-height: 60px;
  writing-mode: vertical-lr;
  color: #fff;
}
</style>
